<template>
  <el-container style="height:100%;">
    <el-header class="bg-light" style="padding:0;background: #eee !important;" height="70px;">
      <a href="/" class="logo" target="_blank">
        <img src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/logo.png" alt>
      </a>
    </el-header>
    <el-container v-loading="loading">
      <el-aside class="bg-dark" style="width: 200px;margin-top: 21px;">
        <el-menu
          default-active="2"
          :router="true"
          background-color="#ffffff"
          text-color="#2F81F1"
          :collapse="mode"
        >
          <el-menu-item :class="$route.name == 'teacherdata'?'first':''"  index="teacherdata" route="/teacherdata" >
            <i class="el-icon-menu"></i>
            <span slot="title">教师课件</span>
          </el-menu-item>
          <el-menu-item :class="$route.name == 'itembank'?'first':''" index="itembank" route="/itembank">
            <i class="el-icon-tickets"></i>
            <span slot="title">测试题</span>
          </el-menu-item>
          <el-menu-item :class="$route.name == 'answer'?'first':''" index="answer" route="/answer">
            <i class="el-icon-tickets"></i>
            <span slot="title">完成测试</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main v-if="show">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { mapActions } from "vuex";

export default {
  name: "home",
  data() {
    return {
      mode: false,
      loading: true,
      show: false
    };
  },
  async mounted() {
    await this.start();
  },
  async beforeMount() {
    let x;
    try {
      x = await this.session();
      if (!x) {
        this.$message.error("账号还没有审核");
        this.$router.push("/login");
      }
    } catch (e) {
      this.$message.error("登陆已失效");
      this.$router.push("/login");
    }
  },
  methods: {
     first(v) {
      if (v == 1) {
        return "first";
      }
    },
    async start() {
      this.loading = true;
      await this.actionCourse();
      await this.actionCatebag();
      await this.actionCoursecatebag();
      await this.actionSecretfile();
      await this.actionTeacherproposal();
      await this.actionTpdata();
      await this.actionItembank();
      await this.actionItembankgroup();
      await this.actionItembankitembankgroup();
      await this.actionTeacherbyiditembank();
      await this.actionAnswer();
      this.loading = false;
      this.show = true;
    },
    ...mapActions([
      "session",
      "actionCourse",
      "actionCatebag",
      "actionCoursecatebag",
      "actionSecretfile",
      "actionTeacherproposal",
      "actionTpdata",
      "actionItembank",
      "actionItembankgroup",
      "actionItembankitembankgroup",
      "actionTeacherbyiditembank",
      "actionAnswer"
    ])
  }
};
</script>

<style lang="scss" scoped>
.first {
  background-color:#2F81F1 !important;
  color: #ffffff !important;
   border-top-left-radius: 55px;
    border-top-right-radius: 56px;
    border-bottom-left-radius: 56px;
    border-bottom-right-radius: 56px;
}
.el-menu-item.is-active{
  background-color:#2F81F1 !important;
  color: #ffffff !important;
   border-top-left-radius: 55px;
    border-top-right-radius: 56px;
    border-bottom-left-radius: 56px;
    border-bottom-right-radius: 56px;
}
.teacher1:hover{
   background-color:#2F81F1 !important;
   color: #ffffff !important;
       border-top-left-radius: 55px;
    border-top-right-radius: 56px;
    border-bottom-left-radius: 56px;
    border-bottom-right-radius: 56px;
}
.teacher2:hover{
   background-color:#2F81F1 !important;
   color: #ffffff !important;
       border-top-left-radius: 55px;
    border-top-right-radius: 56px;
    border-bottom-left-radius: 56px;
    border-bottom-right-radius: 56px;
}
.teacher3:hover{
   background-color:#2F81F1 !important;
   color: #ffffff !important;
       border-top-left-radius: 55px;
    border-top-right-radius: 56px;
    border-bottom-left-radius: 56px;
    border-bottom-right-radius: 56px;
}
.bg-dark{
  background-color:#ffffff !important;
}
.bg-light{
  background-color:#ffffff;
}
.logo {
  line-height: 70px;
  width: 200px;
  background-color: $xue-color-bg-f2;
  display: inline-block;
  text-align: center;
}
</style>